ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
ここは整理目的のページのため最終的なアウトプットは以下をご覧ください
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと - Speaker Deck
https://gyazo.com/bc44d4b9aa5727fde41dc6529bf3b5c2
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと by 大山奥人 | プロポーザル | フロントエンドカンファレンス北海道2024 #frontendo - fortee.jp
なぜこの発表をしようと思ったのか
これまでのフロントエンド関連のイベントではブラウザについての発表があまりなかったので、これを機会に整理して発表してみたいと思った
以前の発表でyamanoku.iconは「フロントエンドエンジニアは表層に責任を持つべきだと」主張していた
ここの根底にあるのはアクセシビリティの考え方がある
触れることができるようにすることが大事=知覚可能性
これは役割が多様化してきた今でも大きくは変わっていないと思っている
フロントエンドにおける表層=ブラウザというインターフェース部分
クロスブラウザ対応はなぜ大切なのか?ということの認識がちゃんとわかっているのか不安になった
単一のブラウザに統合されたらいいよなみたいな気持ち
気持ちはわかる
ただそれだとマズい
サポートをするためにブラウザ間での互換性をもった実装をすることが必要
ではなぜ互換性を維持しなければならないのか?
歴史を振り返りつつ、どう取り組むべきなのかを認識していきたい
推奨環境でブラウザ最新版に対応していくのはあるが、過去の環境をつかうユーザーはどう取り持つのか?
Baselineという考え方は有用だと思っている
このへんはユーザーに説明するよりも自分たちが把握していく上で必要だと思う
フロントエンドカンファレンス北海道2024開催前でjxckさんが自分なんかよりもすごい発信をされていたのでズルいとおもった(?)
なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待 | blog.jxck.io
発表してみた内容としてはそこまで真新しい内容ではなかったのと実践することとは離れてしまっているが、こういう歴史を経て今があるというところを知って欲しかった
機能や表現においてどういうWeb APIを使うべきなのか、の判断材料にしてほしい
ブラウザサポートに疲弊してほしくはない
それよりも先のことを見てほしい
検品におけるブラウザチェックの再考 | コラム | ミツエーリンクス
ブラウザチェックもある程度は簡略化ができるようになってきた
ただ実際の推奨ブラウザについてを見るときはチェックは必要
これを見ると自分たちが気をつけるべきはブラウザの個別の挙動ではなくWeb標準のことなのではないか?
概要
本発表では、フロントエンド開発におけるブラウザ互換を意識することの重要性に焦点を当てます。
過去の歴史的なブラウザ戦争から現代に至るまでを振り返りつつ、開発者やユーザーが直面するブラウザの課題と互換性の重要性を語ります。
IEサポートという歴史を振り返りつつどのようにして現在の主要なブラウザたちが残ったのかを詳しく見ていきます
Web標準に準拠した互換性がなぜ重要であるか、それが損なわれたWebはどのように影響を与えるかを掘り下げていきます
ブラウザ互換性を維持するための各種取り組みを紹介し、エコシステム全体の健全性に貢献する方法を模索していきます
ブラウザ互換を意識したフロントエンド開発は、単なる開発者だけの問題を超えるWebの未来を守るための責務です。 このセッションで、ブラウザ互換の理解を深め、日々の開発において適切な意思決定ができるようになることを目指します。
発表内容
フロントエンドに関わる人であれば意識するであろうWebブラウザ
推奨環境、サポート環境
そもそもなぜブラウザのためのサポートをするのか?
ユーザや顧客が使っているブラウザ使用率から参照
Google Analytics
限定的なブラウザサポートするところもある
Chromeのみの環境
サポートからFirefoxを除外する
シェア率の低さ
ブラウザ間のバグ対応コスト
ブラウザ戦争の歴史と現在の状況
ブラウザー史: 現代のブラウザーを生み出したせめぎ合い
初期のブラウザ戦争(NetscapeとInternet Explorer)
Netscapeの登場
MicrosoftからInternet Explorerが後続して登場
この時すでにそれぞれのブラウザでの表示が違う問題が起こっている
Internet Explorerの独占
互換性のないバージョンを超えたIEハックという手法
モダンブラウザの台頭(Firefox、Chrome、Safari)
Firefoxの登場
DevToolsでの検証しやすさ
Chromeの台頭
BlinkはWebkitをフォークして生まれる
圧倒的シェアを誇るように
ChromeOSも生まれる
Internet Explorerの衰退
「IEサポート」というコスト
https://www.youtube.com/watch?v=meO81HJlhrE
Web標準が生まれる
各標準化団体の登場
W3C
WHATWG
ECMA
Khronos
IEサポートの終了
公式によるサポート終了の発表 (2021)
Internet Explorer は Microsoft Edge へ – Windows 10 の Internet Explorer 11 デスクトップアプリは 2022 年 6 月 15 日にサポート終了 - Windows Blog for Japan
Trident、EdgeHTMLの撤退
残ったブラウザエンジン(Blink、Gecko、WebKit)
Chromiumベースのものが増える
Microsoft Edge
Brave
Vivaldi
Opera
Arc
ブラウザ互換の重要性(互換性への理解を促す)
ブラウザエンジンの多様性(Blink、Gecko、WebKit)を尊重する
先述したとおり、またInternet Explorerの悲劇を繰り返してしまうかもしれない
Chromeへの一極集中
互換性が損なわれた場合の影響
What -wil- lwould a Chromium-only Web look like?
今後のChromiumはオープンソースでコード自体は見れたとしても、その意思決定においてまでは不透明なままで、Googleの見えない社内政治に巻き込まれて誰もが参加できなくなる可能性や、政府がGoogleに対して厳格な規制介入が入ることでWeb自体はどうなっていくのだろうか
Safariを「令和のIE」と風刺することより知っておくべきブラウザの事情 | yamanoku Advent Calendar 2023
Safariは第2のIEという揶揄
そんなことはないですが…
Safariを「令和のIE」と風刺することより知っておくべきブラウザの事情 | yamanoku Advent Calendar 2023
新たなブラウザの実装も進む
Flow Browser
https://www.ekioh.com/flow-browser/
Servo
Rust製
Verso
Rust製ブラウザエンジン「Servo」搭載、新たなWebブラウザ「Verso」の開発プロジェクトが立ち上がる - Publickey
Ladybirdの登場
なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待 | blog.jxck.io
法律の視点
EUのDMAに対する措置
独占禁止法
AppleのWebkitブラウザのみにすることを禁止にする
ウェブブラウザ「Brave」のインストール数が急増、Appleがデジタル市場法準拠のためブラウザ選択画面を追加した影響か - GIGAZINE
日本も参考にした法案が通っている
互換性維持のための取り組み
Web標準の役割と重要性
web-platform-tests
Test262
https://test262.fyi/
ブラウザベンダの取り組み
Interop
相互運用性を高めるためにテストスイートを達成できるようにする
Igaliaという存在の登場
クウラウドファンディングにて実装してくれるフリーソフトウェアコンサルタント会社
ブラウザベンダと共に相互運用性向上に取り組む
バグ報告
https://issues.chromium.org/issues/wizard
https://bugs.webkit.org/
https://feedbackassistant.apple.com/
https://bugzilla.mozilla.org/
https://webcompat.com/
Google Developer Expertsが語るWeb技術の最前線
開発者の責任と実践(意思決定ができるための情報を揃える)
Web周辺で何が起きているのかを知る
ブラウザベンダからの発信
Chrome for Developers
Blog | WebKit
Mozilla Firefox Release Notes
mozaic.fm
プラットフォーム
エコシステム
各社ブログなどでの発信
株式会社ミツエーリンクス
CodeGrid
サイボウズフロントエンドマンスリー
Baselineへの意識
最新技術の採用と下位互換性のバランスを意識する
Newly available: The feature becomes supported by all of the core browsers, and is therefore interoperable.
Widely available: 30 months has passed since the newly interoperable date. The feature can be used by most sites without worrying about support.
互換性を意識した設計と実装
Widely availableを意識する
Newly availableでは「控えめ」な使用を考える
プログレッシブ・エンハンスメントの考え方
CSSだと@supportsを使用する
Browser support at Clearleft
ref https://clearleft.com/thinking/a-modern-approach-to-browser-support
ref https://adactio.com/journal/21184
Clearleftでのブラウザサポートの考え方も参考になるかも
1. Website content and core functionality should be accessible to everyone.
2. It’s okay for websites to look different in different browsers.
表示が異なることは良いが、表示が見えない・機能が動かないことはバグとして考える
まとめ
ブラウザ互換を通じてWeb標準を守っていく
ブラウザをサポートするのではなく、ブラウザが実現できているWeb標準技術を維持する
時代の変化で何が変わるかわからないものに対しては標準を守ることを徹底してみてもいいと思う
その際にBaselineという指標を定めてみてもいいと思う
参考資料
インターネットの歴史がわかる | おさらい!Web制作史
フォクすけの Firefox 情報局 - Firefox って何?
https://foxkeh.jp/downloads/history/history-foxkeh.pdf
Web Standards Interop 2022 ~TechFeed Conference 2022講演より | gihyo.jp
主要ブラウザベンダー、互換性問題を解決するプロジェクト"Interop 2024"を発表 - InfoQ
DMA(デジタル市場法)が日本のユーザーにとっても無視できない理由 | Vivaldi Browser
Web Runtime - YouTube
開発者によるWeb標準化を可能とする「Extensible Web」とは? | HTML5Experts.jp
進むレンダリングエンジンの寡占化に想う | コラム | ミツエーリンクス
Microsoft EdgeのChromium移行とか - fragmentary
EdgeHTMLを悼む - saneyuki_s log
Web Browser History - First, Early | LivingInternet
アップル、Safariを発表 - Apple (日本)
Chromium と WebKit でシェア 9 割以上に、ブラウザーシェアの激動の 10 年史をダラダラと語る – webfrontend.ninja
フロントエンドカンファレンス北海道2024 発表原稿